import React, { Component } from 'react';
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';
import Parent from './components/Parent';
// import Counter from './components/Counter';

export default class App extends Component {
  constructor(props) {
    super(props);
    //状态在哪里，操作状态的方法就在那里
    this.state = {
      todos: [
        {id: 1, name: '起床', done: true},
        {id: 2, name: '跑步', done: false},
        {id: 3, name: '吃饭', done: true},
        {id: 4, name: '敲代码', done: false}
      ]
    }
  }
  //添加一个todo对象
  addTodo = (todoObj) => {
    const {todos} = this.state;
    const newTodos = [...todos,todoObj];
    this.setState({ todos: newTodos});
  }
  // 更新一个todo对象
  updateTodo = (id, done) => {
    const {todos} = this.state;
    const newTodos = todos.map((todoObj) => {
       if (todoObj.id === id) return {...todoObj, done: done}
       else return todoObj;
    });
    this.setState({todos: newTodos});
  }
  //删除一个todo对象
  delTodo = (id) => {
    const {todos} = this.state;
    const newTodos = todos.filter(todoObj => {
      return todoObj.id !== id;
    });
    this.setState({todos: newTodos});
  }
  //清除已完成任务
  clearDoneTodos = () => {
    const {todos} = this.state;
    const newTodos = todos.filter(todoObj => {
      return todoObj.done  === false;
    });
    this.setState({todos: newTodos});
  }
  //全选/反选
  CheckAllTodo = (done) => {
    const {todos} = this.state;
    const newTodos =  todos.map(todoObj => {
      return {...todoObj, done:done}
    });
    this.setState({todos: newTodos});
  }
  render() {
    const todos = this.state.todos
    return (
      <div>
          <Header todos={todos} addTodo={this.addTodo}/>
          <List todos={todos}  updateTodo={this.updateTodo} delTodo={this.delTodo}/>
          <Footer  todos={todos} CheckAllTodo={this.CheckAllTodo} clearDoneTodos={this.clearDoneTodos}/>
          {/* <Counter/> */}
          <Parent></Parent>
      </div>
    )
  }
}
